.user-profile-sidebar
  .profile-header.gl-pb-5.gl-pt-3.gl-overflow-y-auto{ class: "@sm/panel:gl-pr-4" }
    .gl-align-top.gl-text-left.gl-max-w-80.gl-wrap-anywhere
      .user-info
        - if @user.confirmed?
          .gl-flex.gl-gap-4.gl-flex-col
            - if @user.pronouns.present? || @user.pronunciation.present? || @user.bio.present?
              %div
                %h2.gl-text-base.gl-mb-2.gl-mt-4= s_('UserProfile|About')
                .gl-flex.gl-gap-2.gl-flex-col
                  - if @user.pronouns.present? || @user.pronunciation.present?
                    .gl-mb-2
                      - if @user.pronunciation.present?
                        %p.gl-m-0
                          = s_("UserProfile|Pronounced as:")
                          %span.gl-text-sm.gl-text-subtle.gl-inline-flex= @user.pronunciation
                      - if @user.pronouns.present?
                        %p.gl-m-0
                          = s_("UserProfile|Pronouns:")
                          %span.gl-text-sm.gl-text-subtle.gl-inline-flex= @user.pronouns
                  - if @user.bio.present?
                    %p.profile-user-bio.gl-mb-0
                      = @user.bio

            - if @user.achievements_enabled && Ability.allowed?(current_user, :read_user_profile, @user)
              #js-user-achievements{ data: { root_url: root_url, user_id: @user.id } }

            - user_local_time = local_time(@user.timezone)
            %div
              - unless @user.private_profile?
                %h2.gl-text-base.gl-mb-2.gl-mt-4= s_('UserProfile|Info')
                - if work_information(@user).present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('work', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    %span
                      = work_information(@user, with_schema_markup: true)
                - if @user.location.present?
                  .gl-flex.gl-gap-2.gl-mb-2{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
                    = sprite_icon('location', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    %span{ itemprop: 'addressLocality' }
                      = @user.location
                - if user_local_time.present?
                  .gl-flex.gl-gap-2.gl-mb-2{ data: { testid: 'user-local-time' } }
                    = sprite_icon('clock', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    %span
                      = user_local_time
                .gl-flex.gl-gap-2.gl-mb-2
                  = sprite_icon('calendar', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                  %span= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }

            - if has_contact_info?(@user)
              .gl-text-default
                %h2.gl-text-base.gl-mb-2.gl-mt-4= s_('UserProfile|Contact')
                - if @user.website_url.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('earth', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-default', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
                - if display_public_email?(@user)
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('mail', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-default', itemprop: 'email'
                - if @user.linkedin.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('linkedin', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to linkedin_name(@user), linkedin_url(@user), class: 'gl-text-default', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
                - if @user.twitter.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('x', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.twitter, twitter_url(@user), class: 'gl-text-default', title: _("X (formerly Twitter)"), target: '_blank', rel: 'noopener noreferrer nofollow'
                - if @user.bluesky.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('at', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.bluesky, bluesky_url(@user), class: 'gl-text-default', title: "Bluesky", target: '_blank', rel: 'noopener noreferrer nofollow'
                - if @user.mastodon.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('mastodon', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-default', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow me'
                - if @user.discord.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('discord', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.discord, discord_url(@user), class: 'gl-text-default', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'
                - if @user.github.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('github', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.github, github_url(@user), class: 'gl-text-default', title: "GitHub", target: '_blank', rel: 'noopener noreferrer nofollow'
                - if @user.orcid.present?
                  .gl-flex.gl-gap-2.gl-mb-2
                    = sprite_icon('link', css_class: 'gl-fill-icon-subtle gl-mt-1 flex-shrink-0')
                    = link_to @user.orcid, orcid_url(@user), class: 'gl-text-default', title: "Orcid", target: '_blank', rel: 'noopener noreferrer nofollow'
